import {View} from '@tarojs/components'
import React, {CSSProperties} from 'react'

const WaterTarget: React.FC<{
  value?: number
  valueStyle?: CSSProperties
  showPercent?: boolean
  text?: string
  showText?: boolean
  textStyle?: CSSProperties
  textColor?: string
  borderColor?: string
  lightBorderColor?: string
  showLightBorder?: boolean
  textShadow?: string
  style?: CSSProperties
}> = ({
  value,
  valueStyle,
  showPercent = false,
  text,
  showText = true,
  textStyle,
  textColor = '#0F8AF9',
  borderColor = '#0F8AF9',
  lightBorderColor = 'rgba(15, 138, 249, 0.1500)',
  showLightBorder = true,
  textShadow = 'none',
  style
}): JSX.Element => {
  const range = 360 * ((value || 0) / 100)
  return (
    <View
      className={`rounded-full relative overflow-hidden`}
      style={Object.assign(
        {
          width: '248rpx',
          height: '248rpx'
        },
        style
      )}
    >
      {/* 左半圆 */}
      <View
        className={`inline-block relative w-12_24 h-full rounded-full rounded-r-0 overflow-hidden`}
      >
        <View
          className={`left-water-range absolute inset-0 w-full h-full border-3 border-r-0 border-solid rounded-full rounded-r-0`}
          style={{
            transform: `rotate(-${
              range >= 180 ? parseInt(String(360 - range)) : 180
            }deg)`,
            transformOrigin: 'right',
            borderColor: borderColor
          }}
        ></View>
        <View
          className={`left-range absolute inset-0 w-full h-full border-3 border-r-0 border-solid rounded-full rounded-r-0`}
          style={{
            borderColor: borderColor,
            opacity: 0.2
          }}
        ></View>
      </View>
      {/* 右半圆 */}
      <View
        className={`inline-block relative w-12_24 h-full rounded-full rounded-l-0 overflow-hidden`}
      >
        <View
          className={`absolute inset-0 w-full h-full border-3 border-l-0 border-solid rounded-full rounded-l-0`}
          style={{
            transform: `rotate(-${
              range < 180 ? parseInt(String(180 - range)) : 0
            }deg)`,
            transformOrigin: 'left',
            borderColor: borderColor
          }}
        ></View>
        <View
          className={`right-water-range absolute inset-0 w-full h-full border-3 border-l-0 border-solid rounded-full rounded-l-0`}
          style={{
            borderColor: borderColor,
            opacity: 0.2
          }}
        ></View>
      </View>
      {/* 虚线框圆 */}
      <View
        className={`absolute top-12_24 left-12_24 transform -translate-x-12_24 -translate-y-12_24 w-21_24 h-21_24 rounded-full overflow-hidden flex flex-col justify-center items-center`}
        style={{
          border: showLightBorder ? '1px dashed' : 'none',
          borderColor: lightBorderColor
        }}
      >
        {/* ${
            type === 'sm'
              ? 'w-23 h-23 mt-8  text-20'
              : type === 'middle'
              ? 'w-39 h-39 mt-23 text-32'
              : 'w-50 h-50 mt-20 text-40'
          } */}
        <View
          className={`px-4 flex justify-center items-center flex-nowrap notHanzi`}
          style={Object.assign(
            {
              width: '100%',
              fontSize: '80rpx',
              textShadow: textShadow,
              color: textColor
            },
            valueStyle
          )}
        >
          {`${value ? (showPercent ? value + '%' : value) : '--'}`}
        </View>

        {showText ? (
          <View
            className="hanzi px-4 flex justify-center items-center truncate"
            style={Object.assign(
              {
                width: '60%',
                fontSize: '28rpx',
                textShadow: textShadow,
                color: textColor
              },
              textStyle
            )}
          >
            {text}
          </View>
        ) : null}
      </View>
    </View>
  )
}

export default WaterTarget
